<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/1/4 0004
  Time: 上午 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网上办税厅状态</title>
</head>
<body>
    <div class="content-wrapper">
        <h3>网上办税厅状态</h3>
        <div class="row">
            <div class="panel widget col-sm-4">
                <div class="row row-table">
                    <div class="row row-table bg-purple">
                        <div class="col-xs-3 text-center bg-purple-dark pv-lg">
                            <em class="icon-globe fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">正常
                            </div>
                            <div class="text-uppercase">网上办税厅当前状态</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">1686人
                                    </div>
                                    <div style="font-size: 10px;">登陆人数</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">30分钟
                                    </div>
                                    <div style="font-size: 10px;">本日平均在线时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-7">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="bar1" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-5">

                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="chart3" style="height: 420px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-7">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div id="bar2" style="height: 420px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-5">
                <div class="panel panel-default">
                    <div class="panel-heading">网上办税厅服务器状态</div>
                    <div class="panel-body">
                        <div id="server-gauge" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>


<script>
     var barOption1 = {
         title: {
             text: '本日登陆人数',
             subtext: ''
         },
         tooltip: {
             trigger: 'axis'
         },

         calculable: true,
         xAxis: [
             {
                 type: 'category',
                 axisLabel: { //横坐标60°倾斜
                     rotate: 60
                 },
                 data: ['南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安', '盐城', '扬州', '镇江', '宿迁', '常州']
             }
         ],
         yAxis: [
             {
                 type: 'value'
             }
         ],
         series: [
             {
                 name: '登陆人数',
                 type: 'bar',
                 data: [20, 49, 70, 232, 256, 767, 1356, 1622, 1326, 1200, 624, 1333, 999],
                 markPoint: {
                     data: [
                         {type: 'max', name: '最大值'},
                         {type: 'min', name: '最小值'}
                     ]
                 },
                 markLine: {
                     data: [
                         {type: 'average', name: '平均值'}
                     ]
                 }
             }
         ]
     };



     barOption2 = {
         title: {
             x: 'center',
             text: '本月网上申报企业户数分城市统计',
             subtext: '',
             link: ''
         },
         tooltip: {
             trigger: 'item'
         },
         calculable: true,
         grid: {
             borderWidth: 0,
             y: 80,
             y2: 60
         },
         xAxis: [
             {
                 type: 'category',
                 show: false,
                 data: ['南京','苏州','无锡','徐州','泰州','连云港','南通','淮安','盐城','扬州','镇江','宿迁','常州']
             }
         ],
         yAxis: [
             {
                 type: 'value',
                 show: false
             }
         ],
         series: [
             {
                 name: '',
                 type: 'bar',
                 itemStyle: {
                     normal: {
                         color: function(params) {
                             // build a color map as your need.
                             var colorList = [
                                 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                             ];
                             return colorList[params.dataIndex]
                         },
                         label: {
                             show: true,
                             position: 'top',
                             formatter: '{b}\n{c}'
                         }
                     }
                 },
                 data: [12,21,10,4,12,5,6,5,25,23,7],
                 markPoint: {
                     tooltip: {
                         trigger: 'item',
                         backgroundColor: 'rgba(0,0,0,0)',
                         formatter: function(params){
                             return '<img src="'
                                     + params.data.symbol.replace('image://', '')
                                     + '"/>';
                         }
                     },
                     data: [
                         {xAxis:0, y: 350, name:'南京', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'},
                         {xAxis:1, y: 350, name:'苏州', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'},
                         {xAxis:2, y: 350, name:'无锡', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'},
                         {xAxis:3, y: 350, name:'徐州', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'},
                         {xAxis:4, y: 350, name:'泰州', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'},
                         {xAxis:5, y: 350, name:'连云港', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'},
                         {xAxis:6, y: 350, name:'南通', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'},
                         {xAxis:7, y: 350, name:'淮安', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'},
                         {xAxis:8, y: 350, name:'盐城', symbolSize:20, symbol: 'image://../asset/ico/地图.png'},
                         {xAxis:9, y: 350, name:'扬州', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'},
                         {xAxis:10, y: 350, name:'镇江', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                         {xAxis:11, y: 350, name:'宿迁', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                         {xAxis:12, y: 350, name:'常州', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                     ]
                 }
             }
         ]
     };





     pipOption = {
         title : {
             text: '本月平均在线时间分城市统计',
             x:'center'
         },
         tooltip : {
             trigger: 'item',
             formatter: "{b} :在线时长 {c}小时"
         },
         legend: {
             x : 'center',
             y : 'bottom',
             data:['南京','苏州','无锡','徐州','泰州','连云港','南通','淮安','盐城','扬州','镇江','宿迁','常州']
         },

         calculable : true,
         series : [
             {
                 name:'面积模式',
                 type:'pie',
                 radius : [30, 110],
                 center : ['50%', 200],
                 roseType : 'area',
                 x: '50%',               // for funnel
                 max: 40,                // for funnel
                 sort : 'ascending',     // for funnel
                 data:[
                     {value:10, name:'南京'},
                     {value:5, name:'苏州'},
                     {value:15, name:'无锡'},
                     {value:25, name:'徐州'},
                     {value:20, name:'泰州'},
                     {value:35, name:'连云港'},
                     {value:30, name:'淮安'},
                     {value:40, name:'盐城'},
                     {value:50, name:'扬州'},
                     {value:45, name:'镇江'},
                     {value:55, name:'宿迁'},
                     {value:60, name:'常州'}
                 ]
             }
         ]
     };





     var gaugeOption = {
         series : [
             {
                 name:'业务指标',
                 type:'gauge',
                 startAngle: 180,
                 endAngle: 0,
                 center : ['50%', '90%'],    // 默认全局居中
                 radius : 180,
                 axisLine: {            // 坐标轴线
                     lineStyle: {       // 属性lineStyle控制线条样式,要搭配radius
                         width: 100
                     }
                 },
                 axisTick: {            // 坐标轴小标记
                     splitNumber: 10,   // 每份split细分多少段
                     length :12,        // 属性length控制线长
                 },
                 axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                     formatter: function(v){
                         switch (v+''){
                             case '10': return '异常';
                             case '50': return '正常';
                             case '90': return '拥堵';
                             default: return '';
                         }
                     },
                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                         color: '#fff',
                         fontSize: 15,
                         fontWeight: 'bolder'
                     }
                 },
                 pointer: {
                     width:50,
                     length: '90%',
                     color: 'rgba(255, 255, 255, 0.8)'
                 },
                 title : {
                     show : true,
                     offsetCenter: [0, '-60%'],       // x, y，单位px
                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                         color: '#fff',
                         fontSize: 10
                     }
                 },
                 detail : {
                     show : true,
                     backgroundColor: 'rgba(0,0,0,0)',
                     borderWidth: 0,
                     borderColor: '#ccc',
                     width: 100,
                     height: 40,
                     offsetCenter: [0, -40],       // x, y，单位px
                     formatter:function(v){
                         switch (v+''){
                             case '10': return '异常';
                             case '50': return '正常';
                             case '90': return '拥堵';
                             default: return '';
                         }
                     },
                     textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                         fontSize : 30
                     }
                 },
                 data:[{value: 50, name: '网上办税厅服务器状态'}]
             }
         ]
     };


     var gaugeChart = null;
     var echarts = null;
     require.config({
         paths: {
             echarts: '${ctx}/assets/echarts/build/dist'
         }
     });
     require(
             [
                 'echarts',
                 'echarts/chart/bar',
                 'echarts/chart/scatter',
                 'echarts/chart/pie',
                 'echarts/chart/map',
                 'echarts/chart/tree',
                 'echarts/chart/funnel',
                 'echarts/chart/gauge',
                 'echarts/chart/wordCloud'

             ],
             function (ec) {
                 //江苏省税务业务办理事项统计
                 echarts = ec;

                 var barChart1 = ec.init(document.getElementById('bar1'));
                 barChart1.setOption(barOption1, true);


                 var barChart2 = ec.init(document.getElementById('bar2'));
                 barChart2.setOption(barOption2, true);

                 var chart3 = ec.init(document.getElementById('chart3'));
                 chart3.setOption(pipOption, true);

                 gaugeChart = echarts.init(document.getElementById('server-gauge'),'macaroons');
                 setInterval(function (){
                     gaugeOption.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
                     gaugeChart.setOption(gaugeOption,true);
                 },2000)


             }
     )







</script>
</body>
</html>
